<template>
  <div>
    <!-- 歌单 -->
    <div class="box">
      <!-- 顶部 -->
      <div class="top-card">
        <div class="icon-wrap">
          <!-- 图片 -->
          <img :src="toplist.coverImgUrl" alt="">
        </div>

        <div class="content-wrap">
          <!-- 上标签 -->
          <div class="tag">精品歌单</div>
          <!-- 标题 -->
          <div class="title">
            {{toplist.name}}
          </div>
          <!-- 介绍 -->
          <div class="info">
            {{toplist.copywriter}}
          </div>
          <div class="bg-mask"></div>
        </div>
        <!-- 背景图片 -->
        <img :src="toplist.coverImgUrl" alt="" class="bg">
      </div>
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item" :class="{ active:tag=='全部'}" @click="tag='全部'">全部</span>
        <span class="item" :class="{ active:tag=='欧美'}" @click="tag='欧美'">欧美</span>
        <span class="item" :class="{ active:tag=='华语'}" @click="tag='华语'">华语</span>
        <span class="item" :class="{ active:tag=='流行'}" @click="tag='流行'">流行</span>
        <span class="item" :class="{ active:tag=='说唱'}" @click="tag='说唱'">说唱</span>
        <span class="item" :class="{ active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</span>
        <span class="item" :class="{ active:tag=='民谣'}" @click="tag='民谣'">民谣</span>
        <span class="item" :class="{ active:tag=='电子'}" @click="tag='电子'">电子</span>
        <span class="item" :class="{ active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</span>
        <span class="item" :class="{ active:tag=='影视原声'}" @click="tag='影视原声'">影视原声</span>
        <span class="item" :class="{ active:tag=='ACG'}" @click="tag='ACG'">ACG</span>
        <span class="item" :class="{ active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</span>
        <span class="item" :class="{ active:tag=='治愈'}" @click="tag='治愈'">治愈</span>
        <span class="item" :class="{ active:tag=='旅行'}" @click="tag='旅行'">旅行</span>
      </div>
      <!-- tab的内容区域 -->

    </div>
    <div class="tab-content">
      <div class="items">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="img-wrap">
            <!-- 框 -->
            <div class="num-wrap">
              <!-- 图片 -->
              <img :src="item.coverImgUrl" alt="" @mouseenter="enter(index)" @mouseleave='leaver()'  @click="details(item.id)"/>
              <p class="p " v-show='activeindex ==index'><i class="el-icon-caret-right"></i></p>
            </div>
          </div>
          <!-- 标题 -->
          <p class="name">{{item.name}}</p>
        </div>

      </div>
      <div class="d"></div>
    </div>

    <div>
      <!-- 分页器
      total 总条数
      current-page 当前页
      page-size 每页多少条数据
      current-change 页码改变事件
     -->
      <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total"
        :current-page="page" :page-size="10" class="paging"></el-pagination>
    </div>
								 
  </div>

  <!-- 分页器 -->

</template>
<style scoped>
.d {
  height: 60px;
}
.box {
  position: absolute;
  top: 110px;
  left: 200px;
}
.top-card {
  position: absolute;
  top: 20px;
  left: 0px;
  height: 200px;
  width: 1000px;
  overflow: hidden;
  border-radius: 10px;
}
.icon-wrap {
  position: absolute;
  top: 20px;
  left: 13px;
  width: 160px;
  height: 160px;
}
.icon-wrap img {
  width: 100%;
  border-radius: 10px;
}
.content-wrap {
  position: absolute;
  top: 20px;
  left: 185px;
  width: 800px;
  height: 160px;
}
.bg {
  width: 100%;
  cursor: pointer;
  border-radius: 10px;
  opacity: 0.3;
}
.tag {
  margin-top: 20px;
  width: 105px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 15px;
  color: #e7aa5a;
  border-radius: 30px;
  border: 1px solid #e7aa5a;
}
.title {
  color: #000;
  margin-top: 20px;
  font-size: 20px;
}
.info {
  color: #000;
  margin-top: 15px;
  font-size: 10px;
}
.tab-bar {
  position: relative;
  top: 220px;
  left: 100px;
}
.tab-bar .item {
  cursor: pointer;
  margin: 0 15px;
}
.tab-content {
  position: relative;
  top: 360px;
  left: 194px;
}
/* 列表的样式 */
/* .tab-content {
  display: flex;
} */
.items {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.items > .item {
  margin: 0px 10px 76px 10px;
  list-style: none;
  width: 180px;
  height: 180px;
}

.img-wrap img {
  position: relative;
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
}
.d {
  height: 150px;
}
.active {
  color: red;
}
.paging {
  position: relative;
  bottom: -250px;
  left: 400px;
  padding-left: 10px;
  width: 120px;
  z-index: 100000;
  border: 0 #fff solid;
}
.item .name:hover {
  text-decoration: underline;
  cursor: pointer;
}
.num-wrap {
  position: relative;
}
.p {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: white;
}
.el-icon-caret-right {
  text-align: center;
  line-height: 45px;
  color: red;
  font-size: 45px;
}
</style>
<script>
import axios from "axios";
import { API } from "../../../common/constant";
export default {
  name: "recommend",
  data() {
    return {
      // 总条数
      total: 0,
      // 页码
      page: 1,
      // 顶部的推荐歌单
      toplist: {},
      // 歌单列表
      list: {},
      // 当前选择的数据
      tag: "全部",
      isShow: false,
      activeindex: -1, //移入图片的下标
    };
  },
  // 倾听器
  watch: {
    tag() {
      // 顶部的 精品歌单
      this.topData();
      // 歌单列表
      this.listData();
      // 修改页码为1
      this.page = 1;
    },
  },
  methods: {
    //歌单列表
    topData() {
      axios({
        url: "https://autumnfish.cn/top/playlist/highquality",
        method: "get",
        params: {
          limit: 1,

          cat: this.tag,
        },
      }).then((res) => {
        this.toplist = res.data.playlists[0];
      });
    },
    // 顶部的精品歌单
    listData() {
      axios({
        url: "https://autumnfish.cn/top/playlist/",
        method: "get",
        params: {
          limit: 10,
          // 起始的值 （页码-1）*每页多少条数据
          offset: (this.page - 1) * 10,
          cat: this.tag,
        },
      }).then((res) => {
        // console.log(res.data.playlists[0].coverImgUrl);
        this.list = res.data.playlists;
        // 保存总条数
        this.total = res.data.total;
      });
    },
    // 页码改变事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // // 保存页码
      this.page = val;
      // // 重新获取数据
      this.listData();
    },
    // 播放显示与隐藏
    enter(index) {
      this.activeindex = index;
      // this.isShow = true;
    },
    leaver() {
      this.activeindex = -1;
      // this.isShow = false;
    },
    // axios
    // details(id) {
    //   axios.get(`${API}/artist/detail?id=${id}`).then((res) => {
    //     this.$router.push(`/details?q=${id}`);
    //   });
    // },
		details(id) {
      this.$router.push(`/details?q=${id}`);
    },
  },
  created() {
    // 顶部的 精品歌单
    this.topData();
    // 歌单列表
    this.listData();
  },
};
</script>
